<template>
    <div class="common-layout">
        <el-container>
            <el-aside width="90px">
                <el-row>
                    <img v-show="isActive[0]" src="../assets/肥料2.png" @click="toggleImg(0)">
                    <img v-show="!isActive[0]" src="../assets/肥料1.png" @click="toggleImg(0)">
                </el-row>
                <el-row>
                    <img v-show="isActive[1]" src="../assets/其他2.png" @click="toggleImg(1)">
                    <img v-show="!isActive[1]" src="../assets/其他1.png" @click="toggleImg(1)">
                </el-row>
            </el-aside>
            <el-main style="background-color:transparent;">
                <router-view></router-view>
            </el-main>
        </el-container>
    </div>
</template>

<script>
export default {
    name: '',
    components: {
    },
    data() {
        return {
            isActive: [false, false]

        }
    },
    methods: {
        toggleImg(index) {
            if (index >= 0 && index < this.isActive.length) {
                this.isActive[index] = true;
            }
            for (let i = 0; i < this.isActive.length; i++) {
                if (i != index) {
                    this.isActive[i] = false;
                }
            }
            if (index == 0) {
                this.goFertilizer();
            }
            if (index == 1) {
                this.goOther("/farmer/shop/other");
            }
        },
        goFertilizer() {
            this.$router.push("/farmer/shop/fertilizer");
        },
        goOther() {
            this.$router.push("/farmer/shop/other");
        }
    },
    created() {
    },
    mounted() {
    },
}
</script>
<style lang="css" scoped>
.el-main {
    margin: 0;
    padding: 0;
}

.el-aside {
    border-right: solid 2px black;
}

.el-aside img {
    height: 110px;
    width: 86px;
    border: solid 2px black;
    border-collapse: collapse;
    margin: 0;
    padding: 0;
}
</style>
